<template>
  <view class="page-container">
    <!-- 视频模块 -->
    <view class="video-section">
      <su-video :src="detailData.videos" :height="400" />
    </view>

    <!-- 标题模块 -->
    <view class="check-box">
      <view class="check-box-border">
        <view class="header-box">
          <view class="header-box-shang">
            <text class="title">{{ detailData.title }}</text>
            <view>
              <view
                class="list-item-right-tag-box2"
                style="margin-top: 3rpx; margin-right: 3rpx"
              >
                <view class="list-item-right-tag-box-text2 center">
                  <view>{{ detailData.responsiblePerson }}</view>
                </view>
              </view>
            </view>
          </view>
          <view class="header-box-xia">
            <view class="header-box-xia-txt2-border">
              <view>
                <view class="list-item-right-tag-box2">
                  <view class="list-item-right-tag-box-text2 center">
                    <view>整改次数：{{ detailData.rectificationCount }}次</view>
                  </view>
                </view>
              </view>
              <view>
                <view class="list-item-right-tag-box">
                  <view class="list-item-right-tag-box-text center">
                    <view>{{ detailData.location }}</view>
                  </view>
                </view>
              </view>
              <view>
                <view class="list-item-right-tag-box3">
                  <view class="list-item-right-tag-box-text3 center">
                    <view>{{ detailData.date }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 整改内容模块 -->
    <view class="check-box">
      <view class="check-box-border">
        <view class="check-box-border-title-border">
          <view class="check-title">整改检查</view>
        </view>
        <view class="check-item">{{ detailData.content }}</view>
      </view>
    </view>

    <!-- 图片模块 -->
    <view class="check-box">
      <view class="check-box-border">
        <view class="check-box-border-title-border">
          <view class="check-title">整改图片</view>
        </view>
        <view class="imut_map_box_message_image flex">
          <image
            v-for="(image, index) in detailData.images"
            :key="index"
            class="imut_map_box_message_image_item"
            :src="image"
            mode="aspectFill"
          />
        </view>
      </view>
    </view>

    <view class="check-box">
      <view class="check-box-border">
        <view class="check-box-border-title-border">
          <view class="check-title">整改情况</view>
        </view>
        <view class="situation-content">
          <view
            class="situation-content-txt"
            v-if="detailData.checkSituation === 0"
            >无隐患</view
          >
          <view
            class="situation-content-txt"
            v-else-if="detailData.checkSituation === 1"
            >存在隐患
          </view>
          <view
            class="situation-content-txt"
            v-else-if="detailData.checkSituation === 2"
            >风险较大
          </view>

          <!-- <image
            class="situation-img"
            :src="getSituationImage(detailData.checkSituation)"
            mode="scaleToFill"
          /> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 整合所有数据到 detailData 对象
const detailData = ref({
  videos: ["https://example.com/video.mp4"],
  title: "火灾自动报警系统整改",
  responsiblePerson: "王志浩",
  rectificationCount: 3,
  location: "B栋三层配电房",
  date: "2024.10.23",
  content:
    "检查人员首先对设备外观进行系统性检查，包括观察外壳是否存在裂纹、变形、锈蚀或脱漆等物理损伤，核查设备型号、参数及警示标识的完整清晰度，并重点确认接线盒、门盖等密封部位的密闭性，同时评估安装环境是否存在积水、油污等影响设备防护等级（IP代码）达标的隐患。在安全性能检测环节，专业人员使用2500V兆欧表对绝缘电阻进行测试，确保其值不低于10MΩ。",
  images: [
    "https://pic.nximg.cn/file/20200417/30308043_121945090242_2.jpg",
    "https://tse3-mm.cn.bing.net/th/id/OIP-C.lF54Ixn38DUVk6rEUT2migHaHa?w=180&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
    "https://tse1-mm.cn.bing.net/th/id/OIP-C.EbLi--DT3Maallhbh6qJJAHaE8?w=260&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7",
  ],
  checkSituation: 0,
});
// 根据检查情况返回对应的图片路径
// const getSituationImage = (situation: number) => {
//   switch (situation) {
//     case 0:
//       return "/static/tabs/自动灭火系统.jpg";
//     case 1:
//       return "/static/tabs/存在隐患.png";
//     case 2:
//       return "/static/tabs/风险较大.png";
//     default:
//       return "/static/tabs/无隐患.png";
//   }
// };
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: #f0f3f8;
}

.page-container {
  width: 96%;
  margin: auto;
}

/*标题模块 */

.check-box {
  background-color: #fff;
  margin-top: 15rpx;
  border-radius: 5px;
}

.check-box-border {
  width: 94%;
  margin: auto;
  padding: 20rpx 0;
}

.header-box {
  .title {
    margin-left: 10rpx;
    font-size: 44rpx;
    font-weight: 700;
    color: #1a1a1a;
    max-width: 70%;
  }

  .header-box-shang {
    display: flex;
    justify-content: space-between;
  }

  .list-item-right-tag-box {
    background-color: #f7ebde;
    display: inline-block;
    margin-bottom: 5rpx;
    padding: 3rpx 13rpx;
    border-radius: 8px;
    margin-left: 10rpx;
  }

  .list-item-right-tag-box-text {
    height: 30rpx;
    font-size: 20rpx;
    font-weight: 550;
    color: #ff6633;
  }

  .list-item-right-tag-box2 {
    background-color: #dee6f7;
    display: inline-block;
    margin-bottom: 5rpx;
    padding: 3rpx 13rpx;
    border-radius: 8px;
  }

  .list-item-right-tag-box-text2 {
    height: 30rpx;
    font-size: 20rpx;
    font-weight: 550;
    color: #0038b1;
  }

  .list-item-right-tag-box3 {
    background-color: #ebeaea;
    display: inline-block;
    margin-bottom: 5rpx;
    padding: 3rpx 13rpx;
    border-radius: 8px;
    margin-left: 10rpx;
  }

  .list-item-right-tag-box-text3 {
    height: 30rpx;
    font-size: 20rpx;
    font-weight: 550;
    color: #666;
  }

  .header-box-xia-txt2-border {
    display: flex;
    margin-top: 10rpx;
    margin-left: 10rpx;
  }
}

/*视频播放模块 */
.video-section {
  position: relative;
  background: #000;
  width: 100%;
  margin: 20rpx auto;

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60rpx;
    background: linear-gradient(transparent, #ecf5ff);
  }
}

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  src: url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/rrtM1LP5iUzZ.woff2")
      format("woff2"),
    url("//at.alicdn.com/wf/webfont/5y8BnD5qQg2n/o0Q3cO7cUfPA.woff")
      format("woff");
  font-display: swap;
}

.check-title {
  font-family: "阿里妈妈数黑体 Bold";
  font-weight: 700;
  font-size: 32rpx;
  padding-left: 20rpx;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8rpx;
    height: 40rpx;
    background: rgb(41, 121, 255);
    border-radius: 8rpx;
  }
}

.check-box-border-title-border {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.check-box-title-right {
  font-size: 26rpx;
  color: #666;
}

.imut_map_box_message_image_item {
  width: 200rpx;
  height: 200rpx;
  border-radius: 5px;
}

.imut_map_box_message_image {
  margin: 20rpx 20rpx;
}

.flex {
  display: flex;
  justify-content: space-between;
}
/*整改内容模块*/
.check-content {
}
.check-item {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6; /* 行高 */
  text-indent: 2em; /* 首行缩进两字符 */
  margin-top: 15rpx;
}

/**整改情况模块 */
.situation-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.situation-content-txt {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
}
.situation-img {
  width: 150rpx;
  height: 150rpx;
}
</style>
